import { Button, Radio, message, Modal, Spin } from 'antd';
import * as React from 'react';
import { WeaLocaleProvider, WeaBrowser } from 'ecCom';
import D3Tree from '../../common/tree/RectTree';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import './index.less';
import CombineSetDialog from '../../dialog/combineSetDialog';
import TemplateBrowser from '../../dialog/templateBrowser';
import OperateMenuDialog from '../../dialog/operateMenuDialog';
import BeforeNodeOperateMenuDialog from '../../dialog/beforeNodeOperateMenuDialog';
import FiledPropDialog from '../../dialog/filedPropDialog';
import JoinCubeDialog from '../../dialog/joinCubeDialog';
import NodeModal from '../../dialog/NodeModal';
import DynamicNodePreviewDialog from '../../dialog/DynamicNodePreviewDialog';
import NodeForm from '../../designer/path/NodeForm';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class NewTaskPath extends React.Component {
    render() {
        const { store } = this.props;
        const { nodeForm, readonly, hasChildren, path, versionNode } = store;
        const dataParams = path ? { pathid: path.id, nodeid: nodeForm.id } : {};
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@kx71d2`} spinning={store.loading} size="large" wrapperClassName="wea-edc-excel-spin">
                <div className="wea-edc-path-designer">
                    <div className="tree-layout-toggle d3-tree-toggle">
                        <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@fh9bha`}>{versionNode && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zrkgn5`} disabled={!nodeForm.isInit} onClick={this.saveNode} disabled={store.loading} className="opt-btn">{getLabel(30986, '保存')}</Button>}</Button.Group>
                        <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@9qyp9n`} value={store.layout} onChange={this.changeLayout}>
                            <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@hvcxuv`} value="0">{getLabel('502277', '左')}</Radio.Button>
                            <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@h8un1y`} value="2">{getLabel('502278', '右')}</Radio.Button>
                            <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@9e36qi`} value="1">{getLabel('502279', '上')}</Radio.Button>
                            <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@ecbie6`} value="3">{getLabel('502280', '下')}</Radio.Button>
                        </Radio.Group>
                    </div >

                    <D3Tree ecId={`${this && this.props && this.props.ecId || ''}_D3Tree@plxb56`}
                        data={toJS(store.versionNode)}
                        onClick={store.openNode}
                        showRight={store.showRight}
                        renderRight={<NodeForm ecId={`${this && this.props && this.props.ecId || ''}_NodeForm@7xdi9p`} store={store} />}
                        layout={store.layout}
                        style={{ height: 'calc(100% - 32px)', top: 50 }}
                        scale={store.scale}
                        zoom={this.zoom}
                        ref={ref => store.d3Tree = ref}
                        showMenu={true}
                        onDelete={(readonly || !nodeForm.parentid) || this.deleteNode}
                        pathType={store.pathType}
                        onAddChild={readonly || this.addChildren}
                        onAddDynamicChild={readonly || this.addDynamicChild}
                        onDeleteChild={(readonly) || (hasChildren && this.deleteChildren)}
                        onSynchro={readonly || this.synchronize}
                        onPreview={readonly || this.onPreview}
                        showname={this.getShowname}
                        desc="hreflinkName"
                    ></D3Tree>

                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@x4c1wc`}
                        ref={ref => this.browser = ref}
                        isSingle={false}
                        type={17}
                        customized={true}
                        onChange={this.addNodes}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        title={getLabel(502284, '添加下级')}
                        memorise={true}
                        replaceDatas={store.childOpreator.slice()}
                        value={store.childOpreator.map(d => d.id).join(',')}
                    />
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@7bqvtp`}
                        icon={"icon-coms02-Data-center"}
                        title={getLabel('510980', '选择节点')}
                        type='edcAppPathNode'
                        isSingle={false}
                        customized={true}
                        ref={ref => this.nodeBrowser = ref}
                        dataParams={dataParams}
                        completeParams={dataParams}
                        destDataParams={dataParams}
                        onChange={store.synchronizeNode}
                    />
                    <CombineSetDialog ecId={`${this && this.props && this.props.ecId || ''}_CombineSetDialog@kyvoyz`} store={store.combineSetDialogStore} />
                    <TemplateBrowser ecId={`${this && this.props && this.props.ecId || ''}_TemplateBrowser@cmcvdi`} store={store.templateBrowserStore} onChange={store.loadTemplate}></TemplateBrowser>
                    <OperateMenuDialog ecId={`${this && this.props && this.props.ecId || ''}_OperateMenuDialog@ymzvk3`} store={store.operateMenuDialogStore} />
                    <BeforeNodeOperateMenuDialog ecId={`${this && this.props && this.props.ecId || ''}_BeforeNodeOperateMenuDialog@ygos0l`} store={store.beforeNodeOperateDialogStore} />
                    <FiledPropDialog ecId={`${this && this.props && this.props.ecId || ''}_FiledPropDialog@h40x5q`} store={store.fieldPropDialogStore} />
                    <JoinCubeDialog ecId={`${this && this.props && this.props.ecId || ''}_JoinCubeDialog@3oeim6`} store={store.joinCubeDialogStore} />
                    <NodeModal ecId={`${this && this.props && this.props.ecId || ''}_NodeModal@0gwj6b`} store={store.nodeModalStore} />
                    <DynamicNodePreviewDialog ecId={`${this && this.props && this.props.ecId || ''}_DynamicNodePreviewDialog@5fk3sw`} store={store.dynamicNodePreviewDialogStore} />
                </div >
            </Spin>
        )
    }
    getShowname = (d) => {
        return `${d.name}`;
    }

    zoom = (scale) => {
        const { store, params } = this.props;
        store.changeScale(parseInt(scale * 10));
    }
    zoomIn = () => {
        const { store, params } = this.props;
        store.changeScale(Math.min(store.scale + 1, 30));
    }
    zoomOut = () => {
        const { store, params } = this.props;
        store.changeScale(Math.max(store.scale - 1, 1));
    }
    importPath = () => {
        const { store, params } = this.props;
        store.openPathTemplateDialog();
    }
    setCombine = () => {
        const { store, params } = this.props;
        store.combineSetDialogStore.open({ appid: params.appid });
    }
    changeLayout = (e) => {
        const { store } = this.props;
        store.changeLayout(e.target.value);
    }

    saveNode = () => {
        const { store } = this.props;
        store.saveNode();
    }

    onPreview = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        store.dynamicNodePreviewDialogStore.open(nodeForm.id);
    }
    addChildrenNode = () => {
        const { store } = this.props;
        const pathType = store.pathType;
        if (pathType < 3) {
            this.addChildren();
        } else if (pathType == 3) {
            this.addDynamicChild();
        }
    }
    addDynamicChild = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        store.nodeModalStore.init(nodeForm);
        store.nodeModalStore.title = getLabel(502284, '添加下级');
        store.nodeModalStore.open();
    }
    addChildren = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        store.setChildOpreator([]);
        store.allChildOpreator(nodeForm.id).then((childOpreator) => {
            store.setChildOpreator(childOpreator);
            if (this.browser) {
                this.browser.openModal();
                const selectPerson = (ids, names, objs) => {
                    if (objs.length > 99) {
                        message.warn(getLabel('502645', '下级节点不能超过99个'));
                        this.browser.openModal();
                        return;
                    }
                    const { store } = this.props;
                    const oldids = childOpreator.map(d => d.id);
                    const newids = objs.filter(d => oldids.indexOf(d.id) === -1).map(d => d.id);
                    if (newids.length === 0) {
                        message.warn(getLabel('502646', '请选择需要添加的人员'));
                        return;
                    }
                    store.addNodes(nodeForm.id, newids.join(','));
                }
                this.selectPerson = selectPerson;
            }
        });
    }
    addNodes = (ids, names, objs) => {
        this.selectPerson(ids, names, objs);
    }

    deleteNode = () => {
        Modal.confirm({
            title: getLabel('505951', '删除节点'),
            content: getLabel('505952', '确认要删除选中的节点？'),
            onOk: () => {
                const { store } = this.props;
                const { nodeForm } = store;
                store.deleteNode(nodeForm.id);
            }
        });
    }

    deleteChildren = () => {
        Modal.confirm({
            title: getLabel('505953', '删除节点'),
            content: getLabel('505954', '确认要删除所有下级节点？'),
            onOk: () => {
                const { store } = this.props;
                const { nodeForm } = store;
                store.deleteChildren(nodeForm.id);
            }
        });
    }

    synchronize = () => {
        if (this.nodeBrowser) {
            this.nodeBrowser.openModal();
        }
    }
}